<template>
	<view class="wrap">
		<view class="list">
			<view class="item bw" v-for="(item, index) in list" :key="index">
				<view class="item-top app_flex-jcsb">
					<view class="item-top_L">{{item.title}}</view>
					<view class="item-top_R">-{{item.amount}}</view>
				</view>
				<view class="item-bottom app_flex-jcsb">
					<view class="item-bottom_L">{{item.createDate}}</view>
					<view class="item-bottom_R">余额{{item.balance}}</view>
				</view>
			</view>
		</view>
		<no-data v-if="list.length == 0 && hasLoad"></no-data>
		<no-more v-if="page > 1 && noMore"></no-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				size: 15,
				hasLoad: false,
				noMore: false,
			}
		},
		onLoad(options) {
			this.updatePage()
		},
		onPullDownRefresh() {
			this.updatePage()
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			updatePage() {
				this.resetPage()
				this.getList()
			},
			resetPage() {
				this.list = []
				this.page = 1
				this.size = 15
				this.hasLoad = false
				this.noMore = false
			},
			onSkipTap(type) {
				const urlObj = {

				}
				this.$g_util.navigationTo(urlObj, type)
			},
			getList() {
				this.$g_api.promotionConsumeList({
					pageNum: this.page,
					pageSize: this.size,
				}).then(({
					data
				}) => {
					this.hasLoad = true
					if (data?.length > 0) {
						this.list = this.list.concat(data)
					} else {
						this.noMore = true
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		border-top: 1px solid $g-border-color;
	}

	.item {
		// height: 140rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid $g-border-color;
	}

	.item-top {
		margin-bottom: 14rpx;
		font-size: 30rpx;
	}

	.item-top_L {}

	.item-top_R {
		color: #ff4c4c;
	}

	.item-bottom {
		font-size: 24rpx;
		color: #999;
	}

	.item-bottom_L {}

	.item-bottom_R {}
</style>
